<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>


    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <link rel="stylesheet" type="text/css"
          href="https://www.jq22.com/demo/jquerybkmoban201908130120/css/line-awesome.css">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/demo/jquerybkmoban201908130120/css/style.css">


    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">


    <style>
        .post-list > .post-item {
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            flex-direction: row;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            justify-content: space-between;
            padding-bottom: 30px;
            border-bottom: 1px solid #f6f6f6;
            margin-top: 16px;
            overflow-wrap: break-word;
        }

        .post-list > .post-item > .post-item-body > .post-item-text > .post-item-title:link {
            color: #005da6;
        }

        .post-list > .post-item > .post-item-body > .post-item-text > .post-item-title {
            font-weight: bold;
            line-height: 25px;
            outline: none;
        }

        .post-list > .post-item > .post-item-body > .post-item-text > .post-item-summary {
            display: block;
            color: #555;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-overflow: clip;
        }

        .post-list > .post-item > .post-item-body > .post-item-text > *:not(:first-child) {
            margin-top: 10px;
        }

        .post-item .avatar {
            border-radius: 0;
            padding: 1px;
            border: 1px solid #ccc;
            float: left;
            margin-right: 5px;
            margin-top: 3px;
        }

        .post-list > .post-item > .post-item-body > .post-item-foot {
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            font-size: 13px;
            color: #555;
        }

        .post-list > .post-item > .post-item-body > .post-item-foot > * {
            margin-right: 16px;
            vertical-align: middle;
        }

        .post-list > .post-item > .post-item-body > .post-item-foot > .post-meta-item {
            display: inline-flex;
            fill: #bdbdbd;
            stroke: #bdbdbd;
            height: 20px;
            white-space: nowrap;
            align-items: center;
        }

        .resize {
            font-size: 20px;
        }


        /**/
        form .comment-content.open {
            height: 88px;
            background-color: #fff;
            box-shadow: 0 0 6px 0 #5094d5;
            border: 1px solid #5094d5;
        }

        form .comment-content {
            display: block;
            width: 100%;
            padding: 6px 8px;
            background: rgba(248, 249, 251, 0.8);
            border: 1px solid #dadde0;
            border-radius: 4px;
            resize: none;
            height: 36px;
            font-size: 14px;
            line-height: 22px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: height .3s ease-in-out;
            transition: height .3s ease-in-out;
            font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }


        .btn-comment {
            float: right;
            margin-top: 10px;
        }


        .month {
            padding: 70px 25px;
            width: 100%;
            background: #1abc9c;
        }

        .month ul {
            margin: 0;
            padding: 0;
        }

        .month ul li {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .month .prev {
            float: left;
            padding-top: 10px;
        }

        .month .next {
            float: right;
            padding-top: 10px;
        }

        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #ddd;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            color: #666;
            text-align: center;
        }

        .days {
            padding: 10px 0;
            background: #eee;
            margin: 0;
        }

        .days li {
            list-style-type: none;
            display: inline-block;
            width: 13.6%;
            text-align: center;
            margin-bottom: 5px;
            font-size: 12px;
            color: #777;
        }

        .days li .active {
            padding: 5px;
            background: #1abc9c;
            color: white !important
        }

        /* Add media queries for smaller screens */
        @media screen and (max-width: 720px) {
            .weekdays li, .days li {
                width: 13.1%;
            }
        }

        @media screen and (max-width: 420px) {
            .weekdays li, .days li {
                width: 12.5%;
            }

            .days li .active {
                padding: 2px;
            }
        }

        @media screen and (max-width: 290px) {
            .weekdays li, .days li {
                width: 12.2%;
            }
        }
    </style>
</head>

<body>
<!--导航栏-->
<div class="wrapper">
    <header>
        <div class="container">
            <div class="logo">
                <a href="" title=""><img src="" alt=""></a>
            </div>
            <div class="search-bar">
                <form>
                    <input type="text" name="search" placeholder="Search...">
                    <button type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </form>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="首页" title="">
                            首页
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <span><img src="" alt=""></span>
                            Companies
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <span><img src="" alt=""></span>
                            Projects
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <span><img src="" alt=""></span>
                            Profiles
                        </a>
                    </li>
                    <li>
                        <a href="" title="">
                            <span><img src="" alt=""></span>
                            Jobs
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 pd-left-none no-pd">
                    <div class="user-data full-width">
                        <div class="user-profile">
                            <div class="username-dt">
                                <div class="usr-pic">
                                    <img src="" alt="头像">
                                </div>
                            </div>
                            <div class="user-specs">
                                <h3>名字</h3>
                            </div>
                        </div>
                    </div>
                    <div class="suggestions full-width">
                        <div class="suggestions-list">
                            <div class="suggestion-usd">
                                <h4>我的点赞</h4>
                            </div>
                            <div class="suggestion-usd">
                                <h4>我的收藏</h4>
                            </div>
                            <div class="suggestion-usd">
                                <h4>Poonam</h4>
                            </div>
                            <div class="suggestion-usd">
                                <h4>Bill Gates</h4>
                            </div>
                            <div class="suggestion-usd">
                                <h4>Jessica William</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <!--帖子列表-->
                <div class="col-lg-6 col-md-8 no-pd">
                    <article class="post-item" data-post-id="15467089">
                        <div class="post-item-text">
                            <a class="post-item-title" href="" target="_blank"
                               style="font-size: 28px">JuiceFS 如何帮助趣头条超大规模 HDFS 降负载</a>
                            <p class="post-item-summary">
                                <a>
                                    <img src="" class="avatar" alt="博主头像"/>
                                </a>
                                作者简介 王振华，趣头条大数据总监，趣头条大数据负责人。 王海胜，趣头条大数据工程师，10 年互联网工作经验，曾在
                                eBay、唯品会等公司从事大数据开发相关工作，有丰富的大数据落地经验。 高昌健，Juicedata
                                解决方案架构师，十年互联网行业从业经历，曾在知乎、即刻、小红书多个团队担任架构师职位 ...
                            </p>
                        </div>
                        <footer class="post-item-foot">
                            <a href=""
                               class="post-item-author"><span style="font-size: 18px">JuiceFS</span></a>
                            <span class="post-meta-item">
                                    <span style="font-size: 18px">2021-10-26 18:04</span>
                                            </span>
                            <a id="digg_control_15470778">
                            <span style="padding-top: 5px" class="resize">
                                <i style="color: #ffc600;left: 27px" class="glyphicon glyphicon-thumbs-up"></i>
                                <i class="glyphicon glyphicon-thumbs-up"></i>0</span>
                            </a>
                            <a>
                                                    <span style="padding-top: 5px" class="resize"><i
                                                            class="glyphicon glyphicon-comment"></i>110</span>
                            </a>
                            <a>
                                                    <span style="padding-top: 5px" class="resize"><i
                                                            class="glyphicon glyphicon-eye-open"></i>29</span>
                            </a>
                            <span id="digg_tip_15467089" class="digg-tip" style="color: red"></span>
                        </footer>
                    </article>


                </div>


                <!--日历-->
                <div style="width: 275px;height: 100px">
                    <div class="month">
                        <ul>
                            <li class="prev">❮</li>
                            <li class="next">❯</li>
                            <li style="text-align:center">
                                August<br>
                                <span style="font-size:18px">2016</span>
                            </li>
                        </ul>
                    </div>

                    <ul class="weekdays">
                        <li>Mo</li>
                        <li>Tu</li>
                        <li>We</li>
                        <li>Th</li>
                        <li>Fr</li>
                        <li>Sa</li>
                        <li>Su</li>
                    </ul>

                    <ul class="days">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li><span class="active">10</span></li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                        <li>22</li>
                        <li>23</li>
                        <li>24</li>
                        <li>25</li>
                        <li>26</li>
                        <li>27</li>
                        <li>28</li>
                        <li>29</li>
                        <li>30</li>
                        <li>31</li>
                    </ul>
                </div>

            </div>
        </div>
    </main>
</div>
</body>
</html>